<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .layui-table-click {
            background-color: #99BBFF !important;
        }

        .layui-iconpicker-body.layui-iconpicker-body-page .hide {
            display: none;
        }

        .layui-form-label {
            width: 130px;
        }
    </style>
</head>

<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layuimini-search">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">医保类型</label>
                            <div class="layui-input-inline">
                                <select name="yblx1" id="yblx1">
                                    <option value="">全部医保</option>
                                    <option value="42030001">职工医保</option>
                                    <option value="42030011">丹江医保</option>
                                    <option value="42030010">竹山医保</option>
                                    <option value="42030008">郧西医保</option>
                                    <option value="42030002">居民医保</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:130px">医院项目编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="itemCode" autocomplete="off" class="layui-input"></input>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:130px">医院项目名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="itemName" autocomplete="off" class="layui-input"></input>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="data-search-btn"><i
                                        class="layui-icon layui-icon-search"></i>搜索</a>
                                <button class="layui-btn  data-refresh-btn" type="button"><i
                                        class="layui-icon layui-icon-refresh"></i>刷新
                                </button>
                                <button class="layui-btn  layui-btn-danger data-download-btn" type="button"><i
                                        class="layui-icon layui-icon-upload-drag"></i>下载
                                </button>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    </div>
</div>

<div hidden="hidden" id="menuform" style="margin: 10px 10px 10px 10px;text-align: center">
    <form class="layui-form " action="" lay-filter="menufrom">
        <div class="layui-form-item">
            <label id="log" style="color: #c24f4a"></label>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">医保类型</label>
            <div class="layui-input-inline">
                <select name="yblx" lay-verify="required" id="yblx" lay-filter="yblx">
                    <option value="42030001">职工医保</option>
                    <option value="42030011">丹江医保</option>
                    <option value="42030010">竹山医保</option>
                    <option value="42030008">郧西医保</option>
                    <option value="42030002">居民医保</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始日期</label>
            <div class="layui-input-inline">
                <input type="text" name="startDate" id="startDate" lay-verify="required" class="layui-input"></input>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0px">
                <button class="layui-btn" lay-submit="" type="button" lay-filter="formDemo">更新</button>
                <button type="button" class="layui-btn layui-btn-primary" id="formDemoClose">退出</button>
            </div>
        </div>
    </form>
</div>
<div hidden="hidden" id="load" style="margin: 10px 10px 10px 10px">
    <form class="layui-form " action="" lay-filter="load">
        <div class="layui-form-item">
            <label id="msg">进度显示...</label>
        </div>
        <div class="layui-form-item">
            <div class="layui-progress layui-progress-big" lay-filter="demo">
                <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="rank">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script src="/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript" src="/js/sweetalert2.all.min.js"></script>
<script>
    layui.use(['form', 'table', 'layer', 'laydate', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            layer = layui.layer,
            element = layui.element;

        $(function () {
            showUpdateLog('42030001');
            // layer.open({
            //     type: 1
            //     ,
            //     title: false //不显示标题栏
            //     ,
            //     closeBtn: false
            //     ,
            //     area: '300px;'
            //     ,
            //     shade: 0.8
            //     ,
            //     id: 'LAY_layuipro' //设定一个id，防止重复弹出
            //     ,
            //     btn: ['好的,知道了']
            //     ,
            //     btnAlign: 'c'
            //     ,
            //     moveType: 1 //拖拽模式，0或者1
            //     ,
            //     content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br/>可以实时显示后台处理进度了<br/> ^_^</div>'
            // })
        });


        function showUpdateLog(yblx) {
            $.ajax({
                url: "/hwn/findInsuranceVsPriceUpdateLog",
                method: "post",
                success: function (data) {
                    if (data.code == '0') {
                        //console.info(data.data);
                        if (data.data != undefined) {
                            var updateDate = new Date(data.data.operateTime).Format('yyyy-MM-dd');
                            var downloadDate = new Date(data.data.downloadDate).Format('yyyy-MM-dd');
                            var str = '上次下载开始时间：' + updateDate + ' ' + data.data.note;
                            $("#log").text(str);
                            //layer.tips(str, "#yblx");
                            laydate.render({
                                elem: '#startDate'
                                , theme: '#393D49',
                                calendar: true,
                                value: downloadDate
                            });
                        } else {
                            $("#log").text("未获取到历史下载记录信息！");
                        }

                    } else {
                        console.info(data.msg);
                        layer.alert("查询历史更新记录异常," + data.msg);
                    }
                },
                data: {
                    yblx: yblx
                }
            });
        }

        form.on('select(yblx)', function (data) {
            var val = data.value;
            showUpdateLog(val);

        });

        //日期格式化，将毫秒转为 XXXX-XX-XX 的格式
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, // 月份
                "d+": this.getDate(), // 日
                "h+": this.getHours(), // 小时
                "m+": this.getMinutes(), // 分
                "s+": this.getSeconds(), // 秒
                "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                "S": this.getMilliseconds()
                // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                        : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;

        };

        table.render({
            elem: '#currentTableId',
            url: '/hwn/findInsuranceVsPrice',
            method: 'post',
            cols: [ [
                {field: 'rank', title: '#', width: 60, sort: true, templet: '#rank'},
                {field: 'aka402', title: '中心项目编码', sort: true},
                {field: 'aka403', title: '中心项目名称', sort: true},
                {field: 'akb020', title: '定点医疗机构编码', sort: true, width: 120},
                {field: 'aka400', title: '定点医疗机构项目编码', sort: true},
                {
                    field: 'insuranceLevel', title: '医保等级', sort: true, templet: function (d) {
                        if (d.insuranceLevel == "甲类") {
                            return '<span  style="color: #34538b;font-weight: bold">' + d.insuranceLevel + '</span>';
                        }
                        if (d.insuranceLevel == "乙类") {
                            return '<span  style="color: limegreen;font-weight: bold">' + d.insuranceLevel + '</span>';
                        }
                        if (d.insuranceLevel == "自费") {
                            return '<span  style="color: red;font-weight: bold">' + d.insuranceLevel + '</span>';
                        }
//<i class='layui-icon layui-icon-ok' style='color:green'></i>" + d.akc175 : "<i class='layui-icon layui-icon-face-cry' style='color:red;margin-right:5px'></i>

                    }
                },
                {field: 'akc224', title: '收费项目种类', sort: true, width: 140},
                {field: 'akc401', title: '定点医疗机构项目名称', sort: true},
                {field: 'aka404', title: '最小包装单位', hide: true},
                {field: 'aka405', title: '单价', sort: true, width: 100},
                {field: 'aka070', title: '定点医疗机构药品剂型', hide: true},
                {field: 'aka071', title: '每次用量', hide: true},
                {field: 'aka072', title: '使用频次', hide: true},
                {field: 'aka406', title: '药厂名称', hide: true},
                {field: 'aka076', title: '单位', hide: true},
                {field: 'aka616', title: '产地', hide: true},
                {field: 'aka084', title: '院内制剂标志', hide: true},
                {field: 'aka081', title: '拼音助记码', hide: true},
                {field: 'aka082', title: '五笔助记码', hide: true},
                {
                    field: 'akc175', title: '审核标志', sort: true, width: 120, templet: function (d) {
//<i class='layui-icon layui-icon-ok' style='color:green'></i>" + d.akc175 : "<i class='layui-icon layui-icon-face-cry' style='color:red;margin-right:5px'></i>
                        return d.akc175 == '已审批' ? '<i class="layui-icon layui-icon-ok" style="color: #00F7DE;font-weight: bold"></i>' + d.akc175 : '<i class="layui-icon layui-icon-face-cry" style="font-weight: bold;color: red"></i>' + d.akc175;
                    }
                },
                {field: 'aae011', title: '经办人', sort: true, width: 120},
                {field: 'aae036', title: '经办时间', sort: true},
                {field: 'aae013', title: '备注', hide: true},
                {field: 'aka077', title: '规格', hide: true},
                {field: 'aae034', title: '审批时间', sort: true}
            ]],
            toolbar: true,
            defaultToolbar: ['filter', 'exports', 'print'],
            size: 'sm',
            skin: 'line',
            height: 'full-140',
            limits: [20, 50, 100, 200],
            limit: 20,
            even: true,
            page: true,
            done: function (res, curr, count) {
                setColor('.layui-table');
            }
        });

        //设置单行背景色
        function setColor(tableClassName) {
            var $table = $(tableClassName).eq(1);
            if ($table.length > 0) {
                //遍历所有行
                $table.find('tr').each(function () {
                    var open = $(this).find('td[data-field="akc175"]');
                    //console.info(open);
                    //JSON.stringify(open)
                    //console.info(JSON.stringify(open));
                    open = open.text();
                    if (open != "已审批") {   //给状态为 的数据行设置背景色
                        $(this).attr('style', "background:#f1dddd;color:red");
                    }
                })
            }
        }


        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {

            if (obj.checked == true) {
                if (obj.type == "all") {
                    $('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
                }
                if (obj.type == "one") {
                    //点击单行
                    if (obj.checked == true) {
                        obj.tr.addClass('layui-table-click');
                    } else {
                        obj.tr.removeClass('layui-table-click');
                    }
                }
            } else {
                if (obj.type == "all") {
                    //点击全不选
                    $('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
                }
                if (obj.type == "one") {
                    //点击全选之后点击单行
                    if (obj.tr.hasClass('layui-table-click')) {
                        obj.tr.removeClass('layui-table-click');
                    }
                }
            }
        });

        //监听行单击事件
        table.on('row(currentTableFilter)', function (obj) {
            $('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
            obj.tr.addClass('layui-table-click');
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    yblx: data.field.yblx1,
                    itemCode: data.field.itemCode,
                    itemName: data.field.itemName
                }
            }, 'data');
            return false;
        });

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.closeAll();
            const ipAPI = '/hwn/downLoadInusrancevsprice';
            Swal.queue([{
                type: 'warning',
                title: '确定要更新医保基准库？',
                text: "有可能下载时间较长，请耐心等待。",
                confirmButtonText: '确定',
                allowOutsideClick: false,   //是否允许点击外部关闭对话框
                allowEscapeKey: false,   //是否允许按ESC键关闭对话框
                showLoaderOnConfirm: true,    //设置为true时，按钮被禁用，并显示一个在加载的进度条。该参数用于AJAX请求的情况
                showCancelButton: true,  //显示取消按钮
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                preConfirm: function () {
                    openSocket();
                    return $.ajax({
                        datatype: 'json',
                        url: ipAPI,
                        method: "POST",
                        data: data.field,
                        success: function (obj) {
                            if (obj.code == '0') {
                                Swal.insertQueueStep({
                                    type: 'success',
                                    title: '更新成功',
                                    text: obj.msg
                                });
                            } else {
                                Swal.insertQueueStep({
                                    type: 'error',
                                    title: '更新失败',
                                    text: obj.msg
                                });
                                console.info(obj.msg);
                            }

                        },
                        error: function (xhr, msg) {
                            Swal.insertQueueStep({
                                icon: 'error',
                                title: '更新失败' + xhr.code + xhr.message + msg
                            })
                        }
                    })
                }
            }])

            return false;


            layer.confirm('确定要更新医保基准库？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                layer.closeAll();
                // var index = layer.msg('拼命处理中...', {
                //     icon: 16
                //     , shade: 0.01,
                //     time: 0
                // });
                openSocket();


                var Interval;

                //layer.msg('添加数据');
                var index = layer.open({
                    type: 1,
                    shade: 0.2,
                    icon: 16,
                    closeBtn: 0,
                    title: false,
                    content: $("#load"),
                    skin: 'layui-layer-molv',
                    area: "25%",
                    success: function (layero, index) {
                        var n = 0;
                        Interval = setInterval(function () {
                            element.progress('demo', n + '%');
                            n = n + 2;
                            if (n >= 100) {
                                n = 0;
                            }
                        }, 100)
                    }
                });

                $.ajax({
                    url: "/hwn/downLoadInusrancevsprice",
                    method: "post",
                    data: data.field,
                    success: function (data) {
                        layer.close(index);
                        clearInterval(Interval);
                        if (data.code == '0') {
                            layer.msg("更新成功," + data.msg, {time: 6000, icon: 6});
                        } else {
                            console.info(data.msg);
                            layer.alert(data.msg);
                        }
                    },
                    error: function (xhr, msg) {
                        layer.close(index);
                        layer.alert(xhr.code + xhr.message + msg);
                    }
                });
            }, function () {
                layer.closeAll();
            });
            return false;
        });

        $("#formDemoClose").on("click", function () {
            layer.closeAll();
        });

        // 监听刷新操作
        $(".data-refresh-btn").on("click", function () {
            table.reload('currentTableId', {
                url: '/hwn/findInsuranceVsPrice'
                , where: {} //设定异步数据接口的额外参数
                //,height: 300
            });
        });

        // 监听更新医保基准库操作
        $(".data-download-btn").on("click", function () {
            layer.open({
                type: 1,
                title: "更新医保对照信息",
                content: $("#menuform"),
                skin: 'layui-layer-molv',
                area: ["33%", "35%"]
            });

        });


        var socket;

        function openSocket() {

            if (typeof (WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {

                var socketUrl = "http://192.168.127.99/imserver";
                socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
                if (socket != null) {
                    socket.close();
                    socket = null;
                }
                console.info(socketUrl);
                socket = new WebSocket(socketUrl);
                //打开事件
                socket.onopen = function () {
                    console.log("正在读取处理进度...");
                    $('#msg').text('正在读取处理进度...');
                };
                //获得消息事件
                socket.onmessage = function (msg) {
                    console.log(msg.data);
                    $('#msg').text(msg.data);
                    //发现消息进入    开始处理前端触发逻辑
                };
                //关闭事件
                socket.onclose = function () {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                socket.onerror = function () {
                    console.log("websocket发生了错误");
                }
            }
        }
    });
</script>

</body>
</html>
